import React, {
    PureComponent
} from 'react'
import {
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    Text,
    Dimensions,
    Button,
    Platform
} from 'react-native'
import CourseDashLineView from '../../widget/course/CourseDashLineView'

const {
    width
} = Dimensions.get('window')

type Props = {
    navigation: any,
    onPress: Function,
    info: Object,
}

export default class MineCourseDetailCell extends PureComponent < Props > {


    render() {


        const {
            info
        } = this.props
        let year = info.year
        let years = year.split('-')
        let year_ = years[0]
        let month = years[1].replace(' ', '')
        if (years[0].search("0") != -1) {
            year_ = years[0].substr(1, 1)
        }
        if (years[1].search("0") != -1) {
            month = years[1].substr(1, 1)
        }
        let times = year_ + '月' + month + '日'

        let zhibo_time = new Date(info.start_time.replace(/-/g,"/")).getTime()
        let end_time = new Date(info.end_time.replace(/-/g,"/")).getTime()

        let current_time = new Date().getTime()

        var stylesdash = styles.dash_black

        var show_btn = ''
        if ((zhibo_time - current_time) > 30 * 60) {
            show_btn = '未开始'
        } else if ((zhibo_time - current_time) < 30 * 60 && (zhibo_time - current_time) > 0) {
            show_btn = '即将开始'
            stylesdash = styles.dash_red
        } else if (current_time > zhibo_time && current_time < end_time) {
            show_btn = '正在直播'
            stylesdash = styles.dash_red
        } else if (current_time > end_time) {
            show_btn = '回放'
        }
        var styles_bg = styles.red_btn
        var style_txt = styles.red_btn_text
        if (show_btn == '未开始') {
            styles_bg = styles.black_btn
            style_txt = styles.black_btn_text
        }

        return (
            <View style={styles.container}>
                <View style={{alignItems:'center',marginTop:6}}>
                    <View style={stylesdash}/>
                </View>
                <View style={{backgroundColor:'white',flex:1,marginLeft:15}}>
                    <Text style={styles.name}>{info.title}</Text>
                    <View style={{marginTop:15,flexDirection:'row',backgroundColor:'white',alignItems:'center'}}>
                        <Text style={styles.time}>{times}</Text>
                        <View style={{marginLeft:15,marginRight:15,width:1,height:12,backgroundColor:'rgba(0,0,0,0.4)',}}/>
                        <Text style={styles.time}>{info.start_time.substr(10,6)+'-'+info.end_time.substr(10,6)}</Text>
                    </View>
                </View>
                <View style={{width:20,height:1}}/>
                <View style={{alignItems:'center',justifyContent:'center'}}>
                    <TouchableOpacity style={styles_bg} onPress={()=>{this.props.onPress()}}>
                        <Text style={style_txt}>{show_btn}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        paddingLeft: 20,
        paddingRight: 12,
        backgroundColor: 'white',
        flexDirection: 'row',
        flex: 1,
    },
    dash_black: {
        backgroundColor: '#C1C1C1',
        shadowOffset: {
            h: 2,
            w: 2
        },
        shadowRadius: 2,
        shadowOpacity: 0.4,
        width: 5,
        height: 5,
        borderRadius: 2.5,
        borderWidth: 2,
        borderColor: 'rgba(193, 193, 193, 0.3)',
    },
    dash_red: {
        backgroundColor: 'rgba(219, 56, 67, 1)',
        shadowOffset: {
            h: 2,
            w: 2
        },
        shadowRadius: 2,
        shadowOpacity: 0.4,
        width: 5,
        height: 5,
        borderRadius: 2.5,
        borderWidth: 2,
        borderColor: 'rgba(219, 56, 67, 0.3)',
    },
    name: {
        fontWeight: 'bold',
        fontSize: 13,
        color: 'black',
    },
    time: {
        color: 'rgba(0,0,0,0.4)',
        fontSize: 13,
    },

    black_btn: {
        width: 71,
        height: 25,
        borderRadius: 13,
        backgroundColor: '#EEEEEE',
        alignItems: 'center',
        justifyContent: 'center',
    },
    black_btn_text: {
        color: '#333333',
        fontSize: 13,
    },
    red_btn: {
        width: 71,
        height: 25,
        borderRadius: 13,
        backgroundColor: '#DB3843',
        alignItems: 'center',
        justifyContent: 'center',
    },
    red_btn_text: {
        color: '#FFFFFF',
        fontSize: 13,
    },

})